<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>出行数据分析平台</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/maps/china.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            color: #fff;
            min-height: 100vh;
            padding: 20px;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            padding: 20px 0;
            margin-bottom: 30px;
            animation: fadeInDown 1s ease;
        }

        .logo {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #ffd700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .logo i {
            animation: pulse 2s infinite;
        }

        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            background: linear-gradient(to right, #ffd700, #ffffff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .subtitle {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            color: #e0e0e0;
            line-height: 1.6;
        }

        .dashboard {
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 25px;
            margin-bottom: 30px;
        }

        .card {
            background: rgba(0, 15, 46, 0.7);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        }

        .chart-container {
            width: 100%;
            height: 600px;
            border-radius: 12px;
            overflow: hidden;
            background: rgba(0, 30, 60, 0.4);
            position: relative;
        }

        .stats-panel h2, .filters h2 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: #ffd700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .stat-card {
            background: rgba(0, 40, 85, 0.6);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            background: rgba(0, 60, 120, 0.7);
            transform: scale(1.03);
        }

        .stat-value {
            font-size: 2.2rem;
            font-weight: 700;
            margin: 10px 0;
            color: #4dabf7;
        }

        .stat-label {
            font-size: 1rem;
            color: #a0d2ff;
        }

        .filters {
            margin-bottom: 25px;
        }

        .filter-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 15px;
        }

        .filter-btn {
            background: rgba(0, 80, 120, 0.6);
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
        }

        .filter-btn:hover, .filter-btn.active {
            background: #1890ff;
            box-shadow: 0 0 15px rgba(24, 144, 255, 0.5);
        }

        .data-table {
            width: 100%;
            margin-top: 40px;
            overflow: hidden;
            border-radius: 12px;
        }

        .data-table h2 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: #ffd700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: rgba(0, 15, 46, 0.7);
            border-radius: 12px;
            overflow: hidden;
        }

        th, td {
            padding: 15px 20px;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        th {
            background: rgba(0, 60, 120, 0.8);
            font-weight: 600;
            color: #ffd700;
        }

        tr:hover {
            background: rgba(0, 80, 160, 0.4);
        }

        .region-cell {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .region-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #4dabf7;
        }

        .top-region {
            color: #ffd700;
            font-weight: 600;
        }

        footer {
            text-align: center;
            padding: 30px 0;
            margin-top: 40px;
            color: #a0d2ff;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 15, 46, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            z-index: 100;
            border-radius: 12px;
        }

        .loader {
            width: 60px;
            height: 60px;
            border: 5px solid rgba(79, 172, 254, 0.2);
            border-top: 5px solid #4facfe;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-text {
            font-size: 1.2rem;
            color: #a0d2ff;
            font-weight: 500;
        }

        .error-message {
            text-align: center;
            padding: 60px 20px;
            color: #ff6b6b;
        }

        .error-message i {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        .error-message p {
            font-size: 1.2rem;
            margin-bottom: 15px;
        }

        .error-message button {
            background: linear-gradient(to right, #ff6b6b, #ff8e8e);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 30px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .error-message button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 107, 107, 0.5);
        }

        /* 响应式设计 */
        @media (max-width: 1100px) {
            .dashboard {
                grid-template-columns: 1fr;
            }

            .chart-container {
                height: 500px;
            }
        }

        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }

            .chart-container {
                height: 400px;
            }

            h1 {
                font-size: 2.2rem;
            }

            .logo {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .filter-group {
                flex-direction: column;
            }

            .filter-btn {
                width: 100%;
            }

            h1 {
                font-size: 1.8rem;
            }

            .subtitle {
                font-size: 1rem;
            }

            .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 10px;
            flex-wrap: wrap;
        }

        .pagination button {
            background: rgba(0, 80, 120, 0.6);
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
            min-width: 36px;
            text-align: center;
        }

        .pagination button:hover:not(:disabled) {
            background: #1890ff;
            box-shadow: 0 0 10px rgba(24, 144, 255, 0.5);
        }

        .pagination button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination .page-info {
            display: flex;
            align-items: center;
            color: #a0d2ff;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-map-marked-alt"></i>
                <span>出行数据可视化平台</span>
            </div>
            <h1>出行数据地图分布</h1>
            <p class="subtitle">本数据可视化平台展示全国各省市出行分布情况，通过颜色深度直观反映各区域出行热度，为旅游规划和市场分析提供数据支持</p>
        </header>

        <div class="dashboard">
            <div class="card">
                <div id="map-chart" class="chart-container">
                    <div class="loading-overlay">
                        <div class="loader"></div>
                        <div class="loading-text">正在加载出行数据，请稍候...</div>
                    </div>
                </div>
            </div>

            <div class="card stats-panel">
                <h2><i class="fas fa-chart-bar"></i> 数据摘要</h2>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-value" id="max-sales">0</div>
                        <div class="stat-label">最高出行量</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="province-count">0</div>
                        <div class="stat-label">分析区域</div>
                    </div>
                </div>

                <div class="filters">
                    <h2><i class="fas fa-filter"></i> 数据筛选</h2>
                    <div class="filter-group">
                        <button class="filter-btn active" data-filter="all">全部数据</button>
                        <button class="filter-btn" data-filter="high">10,000+</button>
                        <button class="filter-btn" data-filter="very-high">50,000+</button>
                        <button class="filter-btn" data-filter="popular">热门地区</button>
                    </div>
                </div>

                <div class="insights">
                    <h2><i class="fas fa-lightbulb"></i> 分析洞察</h2>
                    <ul style="padding-left: 20px; margin-top: 15px; line-height: 1.8;">
                        <li>经济发达地区出行需求显著高于其他地区</li>
                        <li>沿海省份出行量普遍高于内陆地区</li>
                        <li>旅游热门省份如海南、云南数据表现突出</li>
                        <li id="top-regions">加载中...</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="card data-table">
            <h2><i class="fas fa-table"></i> 详细数据</h2>
            <table id="data-table">
                <thead>
                    <tr>
                        <th>排名</th>
                        <th>地区</th>
                        <th>出行量</th>
                        <th>区域类别</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="4" style="text-align: center; padding: 30px;">
                            <div class="loading-text">正在加载数据...</div>
                        </td>
                    </tr>
                </tbody>
            </table>

            <!-- 分页控件 -->
            <div class="pagination">
                <button id="first-page">首页</button>
                <button id="prev-page">上一页</button>
                <div class="page-info" id="page-info">第 1 页</div>
                <button id="next-page">下一页</button>
                <button id="last-page">末页</button>
            </div>
        </div>

        <footer>
            <p>©  出行数据可视化平台 | 本数据仅用于分析展示</p>
            <p>时间: <span id="update-time"></span></p>
        </footer>
    </div>

    <script>
        // 全局变量
        let chart = null;
        let provinceData = [];
        let stats = {
            maxSales: 0,
            minSales: 0,
            provinceCount: 0,
            totalSales: 0,
            topRegions: []
        };

        // 分页相关变量
        let currentPage = 1;
        const rowsPerPage = 10;
        let totalPages = 1;

        // 页面加载完成后获取数据
        $(document).ready(function() {
            loadData();

            // 筛选按钮事件
            $('.filter-btn').click(function() {
                $('.filter-btn').removeClass('active');
                $(this).addClass('active');

                const filter = $(this).data('filter');
                applyFilter(filter);
            });

            // 分页按钮事件
            $('#first-page').click(function() {
                if (currentPage > 1) {
                    currentPage = 1;
                    updateDataTable();
                }
            });

            $('#prev-page').click(function() {
                if (currentPage > 1) {
                    currentPage--;
                    updateDataTable();
                }
            });

            $('#next-page').click(function() {
                if (currentPage < totalPages) {
                    currentPage++;
                    updateDataTable();
                }
            });

            $('#last-page').click(function() {
                if (currentPage < totalPages) {
                    currentPage = totalPages;
                    updateDataTable();
                }
            });
        });

        // 从后端加载数据
        function loadData() {
            // 显示加载状态
            $('.loading-overlay').show();

            // 获取地区统计数据
            $.ajax({
                url: '/menu/get_region_stats',
                type: 'GET',
                data: {
                    page: 1,
                    limit: 1000  // 获取所有数据
                },
                success: function(response) {
                    if (response.code === 0) {
                        // 处理数据
                        processData(response);

                        // 初始化地图
                        initMap();

                        // 更新统计数据卡片
                        updateStatsCards();

                        // 更新数据表格
                        updateDataTable();

                        // 更新时间
                        updateTime();
                    } else {
                        showError('获取数据失败: ' + response.msg);
                    }
                },
                error: function(xhr, status, error) {
                    showError('请求失败: ' + error);
                },
                complete: function() {
                    $('.loading-overlay').hide();
                }
            });
        }

        // 处理后端返回的数据
        function processData(response) {
            const data = response.data;

            // 按省份分组数据
            const provinceMap = {};

            data.forEach(item => {
                const province = item.province;
                const sales = item.total_sales || 0;

                if (!provinceMap[province]) {
                    provinceMap[province] = {
                        province: province,
                        sales: 0,
                        cityCount: 0,
                        category: getProvinceCategory(province)
                    };
                }

                provinceMap[province].sales += sales;
                provinceMap[province].cityCount++;
            });

            // 转换为数组
            provinceData = Object.values(provinceMap);

            // 按出行量降序排序
            provinceData.sort((a, b) => b.sales - a.sales);

            // 计算统计数据
            stats.provinceCount = provinceData.length;
            stats.totalSales = provinceData.reduce((sum, province) => sum + province.sales, 0);

            if (provinceData.length > 0) {
                stats.maxSales = provinceData[0].sales;
                stats.minSales = provinceData[provinceData.length - 1].sales;

                // 获取前三名省份
                stats.topRegions = provinceData.slice(0, 3).map(p => p.province);
            }

            // 计算总页数
            totalPages = Math.ceil(provinceData.length / rowsPerPage);
        }

        // 初始化地图
        function initMap() {
            // 准备地图需要的数据格式
            const formattedData = provinceData.map(item => ({
                name: item.province,
                value: item.sales
            }));

            // 初始化图表
            chart = echarts.init(document.getElementById('map-chart'), 'dark');

            // 地图配置
            var option = {
                animation: true,
                animationThreshold: 2000,
                animationDuration: 1000,
                animationEasing: "cubicOut",
                animationDelay: 0,
                animationDurationUpdate: 300,
                animationEasingUpdate: "cubicOut",
                animationDelayUpdate: 0,
                aria: { enabled: false },
                color: ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"],
                series: [{
                    type: "map",
                    name: "出行分布",
                    label: { show: true, margin: 8 },
                    map: "china",
                    data: formattedData,
                    roam: true,
                    aspectScale: 0.75,
                    nameProperty: "name",
                    selectedMode: false,
                    zoom: 1,
                    mapValueCalculation: "sum",
                    showLegendSymbol: true,
                    emphasis: { itemStyle: { areaColor: '#ffd700' } }
                }],
                legend: [{
                    data: ["出行分布"],
                    selected: { "出行分布": true },
                    show: true,
                    padding: 5,
                    itemGap: 10,
                    itemWidth: 25,
                    itemHeight: 14,
                    backgroundColor: "transparent",
                    borderColor: "#ccc",
                    borderWidth: 1,
                    borderRadius: 0,
                    pageButtonItemGap: 5,
                    pageButtonPosition: "end",
                    pageFormatter: "{current}/{total}",
                    pageIconColor: "#2f4554",
                    pageIconInactiveColor: "#aaa",
                    pageIconSize: 15,
                    animationDurationUpdate: 800,
                    selector: false,
                    selectorPosition: "auto",
                    selectorItemGap: 7,
                    selectorButtonGap: 10
                }],
                tooltip: {
                    show: true,
                    trigger: "item",
                    triggerOn: "mousemove|click",
                    axisPointer: { type: "line" },
                    showContent: true,
                    alwaysShowContent: false,
                    showDelay: 0,
                    hideDelay: 100,
                    enterable: false,
                    confine: false,
                    appendToBody: false,
                    transitionDuration: 0.4,
                    textStyle: { fontSize: 14 },
                    borderWidth: 0,
                    padding: 5,
                    order: "seriesAsc",
                    formatter: function(params) {
                        return `<strong>${params.name}</strong><br/>出行量: ${params.value.toLocaleString()}`;
                    }
                },
                title: {
                    show: true,
                    text: "出行数据地图分布",
                    textStyle: {
                        fontSize: 20,
                        color: '#ffd700'
                    },
                    left: 'center',
                    top: 10
                },
                visualMap: {
                    show: true,
                    type: "continuous",
                    min: 0,
                    max: stats.maxSales,
                    inRange: { color: ["#2a5caa", "#7ec2f3", "#f8d568", "#ff9e6d", "#ff6b6b"] },
                    calculable: true,
                    inverse: false,
                    splitNumber: 5,
                    hoverLink: true,
                    orient: "vertical",
                    right: 30,
                    bottom: 100,
                    showLabel: true,
                    itemWidth: 20,
                    itemHeight: 200,
                    borderWidth: 0,
                    textStyle: { color: '#fff' }
                }
            };

            // 应用配置
            chart.setOption(option);

            // 响应窗口大小变化
            window.addEventListener('resize', function() {
                chart.resize();
            });

            // 添加地图点击事件
            chart.on('click', function(params) {
                console.log('点击了:', params.name);

                // 高亮显示点击的地区
                chart.dispatchAction({
                    type: 'highlight',
                    name: params.name
                });
            });
        }

        // 应用筛选条件
        function applyFilter(filter) {
            if (!chart) return;

            // 重置所有高亮
            chart.dispatchAction({ type: 'downplay' });

            // 根据筛选条件高亮不同区域
            if (filter === 'high') {
                // 高亮出行量大于10,000的省份
                const highSalesProvinces = provinceData
                    .filter(p => p.sales > 10000)
                    .map(p => p.province);

                chart.dispatchAction({
                    type: 'highlight',
                    name: highSalesProvinces
                });
            } else if (filter === 'very-high') {
                // 高亮出行量大于50,000的省份
                const highSalesProvinces = provinceData
                    .filter(p => p.sales > 50000)
                    .map(p => p.province);

                chart.dispatchAction({
                    type: 'highlight',
                    name: highSalesProvinces
                });
            } else if (filter === 'popular') {
                // 高亮热门地区（前三名）
                chart.dispatchAction({
                    type: 'highlight',
                    name: stats.topRegions
                });
            }
        }

        // 更新统计数据卡片
        function updateStatsCards() {
            $('#max-sales').text(stats.maxSales.toLocaleString());
            $('#min-sales').text(stats.minSales.toLocaleString());
            $('#province-count').text(stats.provinceCount);
            $('#total-sales').text(stats.totalSales.toLocaleString());

            // 更新分析洞察
            $('#top-regions').html(`<strong>${stats.topRegions.join('、')}</strong> 位列出行量前三名`);
        }

        // 更新数据表格（已移除占比列）
        function updateDataTable() {
            const tableBody = $('#data-table tbody');
            tableBody.empty();

            if (provinceData.length === 0) {
                tableBody.append(`
                    <tr>
                        <td colspan="4" style="text-align: center; padding: 30px;">
                            没有找到数据
                        </td>
                    </tr>
                `);
                return;
            }

            // 计算当前页的数据范围
            const startIndex = (currentPage - 1) * rowsPerPage;
            const endIndex = Math.min(startIndex + rowsPerPage, provinceData.length);
            const currentData = provinceData.slice(startIndex, endIndex);

            // 添加省份数据行
            currentData.forEach((province, index) => {
                const rank = startIndex + index + 1;

                // 前三名使用特殊样式
                const salesClass = rank <= 3 ? 'top-region' : '';

                const row = `
                    <tr>
                        <td>${rank}</td>
                        <td class="region-cell">
                            <div class="region-color" style="background: ${getProvinceColor(rank)}"></div>
                            ${province.province}
                        </td>
                        <td class="${salesClass}">${province.sales.toLocaleString()}</td>
                        <td>${province.category}</td>
                    </tr>
                `;

                tableBody.append(row);
            });

            // 更新分页信息
            updatePaginationInfo();
        }

        // 更新分页信息
        function updatePaginationInfo() {
            const startIndex = (currentPage - 1) * rowsPerPage + 1;
            const endIndex = Math.min(currentPage * rowsPerPage, provinceData.length);
            const totalItems = provinceData.length;

            $('#page-info').html(`
                第 ${currentPage} 页 / 共 ${totalPages} 页<br>
                显示 ${startIndex} - ${endIndex} 条，共 ${totalItems} 条
            `);

            // 更新按钮状态
            $('#first-page').prop('disabled', currentPage === 1);
            $('#prev-page').prop('disabled', currentPage === 1);
            $('#next-page').prop('disabled', currentPage === totalPages || totalPages === 0);
            $('#last-page').prop('disabled', currentPage === totalPages || totalPages === 0);
        }

        // 获取省份类别
        function getProvinceCategory(province) {
            // 直辖市
            const municipalities = ['北京市', '上海市', '天津市', '重庆市'];
            if (municipalities.includes(province)) return '直辖市';

            // 自治区
            const autonomousRegions = ['内蒙古自治区', '广西壮族自治区', '西藏自治区', '宁夏回族自治区', '新疆维吾尔自治区'];
            if (autonomousRegions.includes(province)) return '自治区';

            // 特别行政区
            const specialRegions = ['香港特别行政区', '澳门特别行政区'];
            if (specialRegions.includes(province)) return '特别行政区';

            // 旅游省份
            const touristProvinces = ['海南省', '云南省'];
            if (touristProvinces.includes(province)) return '旅游省份';

            // 区域分类
            const eastProvinces = ['江苏省', '浙江省', '山东省', '福建省', '广东省'];
            const westProvinces = ['四川省', '陕西省', '贵州省', '甘肃省', '青海省'];
            const southProvinces = ['广西壮族自治区', '海南省', '广东省'];
            const northProvinces = ['河北省', '山西省', '辽宁省', '吉林省', '黑龙江省'];
            const centralProvinces = ['河南省', '湖北省', '湖南省', '安徽省', '江西省'];

            if (eastProvinces.includes(province)) return '东部省份';
            if (westProvinces.includes(province)) return '西部省份';
            if (southProvinces.includes(province)) return '南部省份';
            if (northProvinces.includes(province)) return '北部省份';
            if (centralProvinces.includes(province)) return '中部省份';

            return '省份';
        }

        // 获取省份颜色（根据排名）
        function getProvinceColor(rank) {
            if (rank === 1) return '#FFD700'; // 金色
            if (rank === 2) return '#C0C0C0'; // 银色
            if (rank === 3) return '#CD7F32'; // 铜色

            // 其他排名使用渐变色
            const colors = ['#4dabf7', '#3ba272', '#9a60b4', '#fc8452', '#73c0de'];
            return colors[(rank - 1) % colors.length];
        }

        // 更新时间
        function updateTime() {
            const now = new Date();
            const formattedDate = now.getFullYear() + '-' +
                                 (now.getMonth() + 1).toString().padStart(2, '0') + '-' +
                                 now.getDate().toString().padStart(2, '0') + ' ' +
                                 now.getHours().toString().padStart(2, '0') + ':' +
                                 now.getMinutes().toString().padStart(2, '0');
            $('#update-time').text(formattedDate);
        }

        // 显示错误信息
        function showError(message) {
            $('#map-chart').html(`
                <div class="error-message">
                    <i class="fas fa-exclamation-triangle"></i>
                    <p>${message}</p>
                    <button onclick="location.reload()">重新加载</button>
                </div>
            `);
        }
    </script>
</body>
</html>